<template>
  <div class="container">
    <img v-if="show" :src="userinfo.avatarUrl" alt=""/>
    <Button  class="btn" v-else open-type="getUserInfo" @getuserinfo="getUserInfo">点我come on!</Button>
    <p class="con-top">hello {{userinfo.nickName}}</p>
    <p class="con-top"> welcome to my world!</p>
    <p v-if="show" class="con-bottom" @tap="tototo">点击进入成人世界</p>
  </div>
</template>

<script>
  // import globalStore from "../../stores/global-store";
  ///static/images/user.png
  export default {
    // computed: {
    //   count() {
    //     return globalStore.state.count;
    //   }
    // }
    data(){
      return{
        userinfo:{},
        show:false
      }
    },
    onLoad(){
      // console.log('onload')

    },
    beforeMount(){
      // console.log('beforeMount')
      //获取用户信息
      // wx.getUserInfo({
      //   success:(data)=>{
      //     console.log(data);
      //   },
      //   fail:( ) =>{
      //       console.log('没有')
      //     }
      // })
      // this.handleGetUserInfo()


    },
    mounted(){
      // console.log('mounted')
    },
    methods:{
      handleGetUserInfo(){
        wx.getUserInfo({
          success:(data)=>{
            // console.log(data);
            this.userinfo=data.userInfo
            this.show=true

          },
          fail:( ) =>{
            console.log('没有')
          }
        })
      },
      getUserInfo(data){
        if(data.mp.detail.rawData){
          this.handleGetUserInfo()
        }
      },
      tototo(){
        // wx.switchTab({
        //   url:'/pages/index/main'
        // })
        wx.navigateTo({
          url:'/pages/new-landing/main'
        })
      }
    }
  };
</script>

<style scoped>
  img{
    height: 200rpx;
    width: 183rpx;
    border-radius:50%

  }
  .container{
    margin-top:146rpx;
    height: 400rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

  }
  .con-bottom{
    border:1px solid red;
    height: 84rpx;
    width :368rpx;
    border-radius:10rpx;
    text-align: center;
    margin-top:25rpx;
    line-height: 84rpx;
    color:#fff;
    background-color: red;

  }
  .btn{
    width: 200rpx;
    height: 200rpx;
    border-radius:50%;
    text-align: center;
    line-height: 200rpx;
    font-size:62rpx;

  }

</style>
